<template>
	<view class="main">
		<image src="../../../static/img/login.jpg" class="background" mode="widthFix"></image>
		<!-- 登录 -->
		<view class="login">
			<view style="width: 80%;height: 30%;">
				<input placeholder="请输入你的手机号" class="input" placeholder-style="color:#4b4b4b" @input="phone"
							 v-if="!emailShow" />
				<input placeholder="请输入你的邮箱号" class="input" placeholder-style="color:#4b4b4b" @input="email" v-else />
			</view>
			<view style="width: 80%;height: 30%;display: flex;">
				<input password placeholder="请输入验证码" class="input" placeholder-style="color:#4b4b4b" @input="check"
							 style="width: 60%;" v-show="!passwordShow" />
				<view v-if="!countDown > 0"
							style="font-size: 20rpx;height: 100%;display: flex;align-items: center;justify-content: right;width: 40%;"
							v-show="!passwordShow" @click="sendCode">
					发送验证码</view>
				<view v-if="countDown > 0"
							style="font-size: 20rpx; height: 100%; display: flex; align-items: center; justify-content: right; width: 40%;">
					{{ countDown }}秒后重试
				</view>
				<input password="" placeholder="请输入密码" v-show="passwordShow" class="input"
							 placeholder-style="color:#4b4b4b" @input="pass" />
			</view>
			<view style="display: flex;width: 100%;">
				<!-- 验证码登录 -->
				<button style="margin-right: 15%;" class="button" @click="login" v-show="!passwordShow">登录</button>
				<!-- 密码登录 -->
				<button style="margin-right: 15%;" class="button" @click="passLogin" v-show="passwordShow">登录</button>
				<button style="margin-left: 15%;" class="button" @click="ToRegist">注册</button>
			</view>
		</view>

		<view class="another">
			<view class="another_text" v-if="!show">其他登录方式</view>
			<view class="another_text" v-else style="height: 100%;">
				<view style="display: flex;">
					<uni-tooltip content="邮箱登录">
						<!-- 展示邮箱登录盒子 -->
						<uni-icons type="qq" size="80rpx" color="#1c80f9" @click="ShowEmail"></uni-icons>
					</uni-tooltip>
					<uni-tooltip content="手机登录">
						<!-- 展示手机号码登录 盒子 -->
						<uni-icons type="phone" size="80rpx" color="#b1ffa5" @click="showPhone"></uni-icons>
					</uni-tooltip>
					<uni-tooltip content="密码登录">
						<!-- 展示手机号码登录 盒子 -->
						<uni-icons type="locked" size="80rpx" color="#9d9d9d" @click="showPass"></uni-icons>
					</uni-tooltip>
				</view>
			</view>
			<view class="another_icon"><uni-icons type="more-filled" size="80rpx" @click="showContent"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			show: false, // 控制内容显示的状态
			username: null, //用户名，可以是手机号，也可以是邮箱
			code: null, //验明码
			password: null, //用户密码
			type: 3,
			emailShow: false,
			passwordShow: true,
			countDown:0,
			timer: null, // 计时器
		};
	},
	methods: {
		showContent() {
			this.show = !this.show; // 点击按钮时，将isContentVisible设为true，显示内容
		},
		// 手机号码
		phone(e) {
			this.username = e.detail.value
		},
		// 邮箱登录邮箱的地址
		email(e) {
			this.username = e.detail.value
		},
		check(e) {
			this.code = e.detail.value
		},
		pass(e) {
			this.password = e.detail.value
		},
		// 注册页面
		ToRegist() {
			uni.navigateTo({
				url: "/pages/View/regist/regist"
			})
		},
		ShowEmail() {
			this.emailShow = true
			this.passwordShow = false
			this.type = 2
		},
		showPhone() {
			this.emailShow = false
			this.passwordShow = false
			this.type = 3
		},
		// 显示密码登录
		showPass() {
			this.emailShow = false
			this.passwordShow = true
		},
		// 登录操作
		login() {
			if (this.username == null || this.username == '') {
				uni.showToast({
					title: "请输入你的账号",
					icon: 'error'
				})
			} else if (this.code == null || this.code == '') {
				uni.showToast({
					title: "请输入你的验证码",
					icon: 'error'
				})
			} else {
				const verificationLoginVO = {
					username: this.username,
					code: this.code
				}
				uni.request({
					url: 'http://localhost:8081/userAuth/verificationLogin/' + this.type,
					method: 'POST',
					data: verificationLoginVO,
					success: (res) => {
						// 验证错误
						if (res.data.code == 40005) {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						} else {
							console.log(res);
							var token = res.data.data.token
							uni.setStorage({
								key: 'userInfo',
								data: token,
							})
							uni.getStorage({
								key: 'userInfo',
								success: (res) => {
									console.log(res);
								}
							})
							uni.reLaunch({
								url: '/pages/View/find/find'
							})
						}
					}
				})
			}
		},
		startCountDown() {
			this.countDown = 60; // 设置初始倒计时时间为60秒
			this.timer = setInterval(() => {
				if (this.countDown > 0) {
					this.countDown--; // 倒计时递减
				} else {
					clearInterval(this.timer); // 清除计时器
				}
			}, 1000);
		},
		// 发送验证码
		sendCode() {
			if (this.countDown > 0) {
				return; // 正在倒计时中，不进行发送操作
			}
			uni.request({
				url: 'http://localhost:8081/userAuth/sendCode/' + this.type + '/2',
				data: {
					username: this.username
				},
				success: (res) => {
					uni.showToast({
						title: '验证码已发送',
						icon: "success",
						success: (res) => {

						},
					})
					this.startCountDown()
				}
			})
		},

		// 密码登录
		passLogin() {
			if (this.username == null || this.username == '') {
				uni.showToast({
					title: '请输入账号',
					icon: 'error'
				})
			} else if (this.password == null || this.password == '') {
				uni.showToast({
					title: '请输入密码',
					icon: 'error'
				})
			} else {
				// 创建FormData对象并添加表单数据,后端使用springSecurity
				const formData = new FormData();
				formData.append('username', this.username);
				formData.append('password', this.password);
				const requestBody = Array.from(formData).map(([key, value]) => {
					return encodeURIComponent(key) + '=' + encodeURIComponent(value);
				}).join('&');
				// 发送POST请求
				uni.request({
					url: '/api/user/login',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: requestBody,
					success: (res) => {

						if(res.data.code==50001){
							uni.showToast({
								title:res.data.message,
								icon:'error'
							})
						}else{
							uni.setStorage({
								key: 'userInfo',
								data: res.data.data,
							})
							uni.reLaunch({
								url: '/pages/View/find/find'
							})
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			}
		}
	}
}
</script>

<style>
.main {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to top,#fff,#edffed,#fff);
}

.background {
	object-fit: contain;
	width: 100%;
}

.login {
	position: absolute;
	width: 80%;
	height: 30%;
	background-color: rgba(176, 176, 176, 0.2);
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 输入框 */
.input {
	width: 100%;
	height: 100%;
}

.another {
	position: absolute;
	width: 100%;
	margin-top: 1200rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.another_icon {
	width: 75rpx;
	height: 75rpx;
	border-radius: 40rpx;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	left: 15%;
}

.another_text {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50rpx;
}

.content {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}


.button {
	font-size: 10rpx;
	width: 25%;
	height: 60rpx;
	background-color: rgba(121, 121, 121, 0.2);
	margin-top: 20rpx;
}
</style>
